import React from 'react';
import {Input, Form, Row, Col, Select} from 'antd';

import RCModal from '@components/modal/index.jsx';
import {sex, qualification, marriageState, passState, nation, REG} from '@assets/config/global.js';

import './scss/parter_msg_modal.scss'

const FormItem = Form.Item;
const Option = Select.Option;

class ParterMsgModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    render() {
        let {modalVisible = false, showFooter = false, data = {}} = this.props;

        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched/*, getFieldsValue*/} = this.props.form;
        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            }
        };

        const rules = [{required: true, message: '必填项！'}];

        const nameError = isFieldTouched('name') && getFieldError('name');// 姓名不能为空
        const sexError = isFieldTouched('sex') && getFieldError('sex');// 性别不能为空
        const birthdayError = isFieldTouched('birthday') && getFieldError('birthday'); // 出生年月不能为空
        const nationError = isFieldTouched('nation') && getFieldError('nation'); // 民族不能为空
        const nativePlaceError = isFieldTouched('nativePlace') && getFieldError('nativePlace'); // 贯籍地不能为空
        const birthPlaceError = isFieldTouched('birthPlace') && getFieldError('birthPlace'); // 出生地不能为空
        const marriageStateError = isFieldTouched('marriageState') && getFieldError('marriageState'); // 婚姻状态不能为空
        const idCardError = isFieldTouched('idCard') && getFieldError('idCard'); // 身份证不能为空
        const phoneError = isFieldTouched('phone') && getFieldError('phone'); // 联系方式不能为空

        const gmtJoinedError = isFieldTouched('gmtJoined') && getFieldError('gmtJoined'); // 入党时间不能为空
        const passStateError = isFieldTouched('passState') && getFieldError('passState'); // 转正情况不能为空
        const introducerError = isFieldTouched('introducer') && getFieldError('introducer'); // 入党介绍人不能为空

        const gmtPassedError = isFieldTouched('gmtPassed') && getFieldError('gmtPassed'); // 转正时间不能为空
        const duesError = isFieldTouched('dues') && getFieldError('dues'); // 月缴纳党费不能为空
        const addressError = isFieldTouched('address') && getFieldError('address'); // 家庭住址不能为空
        const accountAddressError = isFieldTouched('accountAddress') && getFieldError('accountAddress'); // 户口所在不能为空
        const identityError = isFieldTouched('identity') && getFieldError('identity'); // 个人身份不能为空
        const schoolError = isFieldTouched('school') && getFieldError('school'); // 毕业院校不能为空
        const majorError = isFieldTouched('major') && getFieldError('major'); // 专业不能为空
        const degreeError = isFieldTouched('degree') && getFieldError('degree'); // 学位不能为空
        const qualificationError = isFieldTouched('qualification') && getFieldError('qualification'); // 学历不能为空
        const companyError = isFieldTouched('company') && getFieldError('company'); // 工作单位不能为空

        return (
            <RCModal visible={modalVisible}
                     footerText={{okText: '提交'}}
                     title='党员基本信息'
                     showFooter={showFooter}
                     onOk={this.submitForm.bind(this)}
                     onCancel={this.onCancel.bind(this)}
                     width={690}
                     disabled={this.hasErrors(getFieldsError())}
            >
                <Form layout="horizontal">
                    <div className="parter-msg-modal modal-content">
                        <Row>
                            <Col span={12}>
                                <FormItem label='姓名' {...formItemLayout}
                                          validateStatus={nameError ? 'error' : ''}
                                          help={nameError || ''}
                                >
                                    {
                                        getFieldDecorator('name', {initialValue: data.name || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='性别' {...formItemLayout}
                                          validateStatus={sexError ? 'error' : ''}
                                          help={sexError || ''}
                                >
                                    {
                                        getFieldDecorator('sex', sex[data.sex] ? {
                                            initialValue: data.sex || 0,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(sex).map((item, index) => {
                                                        return (
                                                            <Option value={sex[item].id} key={index}>{sex[item].name}</Option>
                                                        )
                                                    })
                                                    // sex.map((item, index) => {
                                                    //     return (
                                                    //         <Option value={index} key={index}>{item}</Option>
                                                    //     )
                                                    // })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='曾用名' {...formItemLayout}>
                                    {
                                        getFieldDecorator('nameUsed', {
                                            initialValue: data.nameUsed || ''
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='出生年月' {...formItemLayout}
                                          validateStatus={birthdayError ? 'error' : ''}
                                          help={birthdayError || ''}
                                >
                                    {
                                        getFieldDecorator('birthday', {
                                            initialValue: data.birthday || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='民族' {...formItemLayout}
                                          validateStatus={nationError ? 'error' : ''}
                                          help={nationError || ''}
                                >
                                    {
                                        getFieldDecorator('nation', nation[data.nation] ? {
                                            initialValue: data.nation || 0,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(nation).map((item, index) => {
                                                        return (
                                                            <Option value={nation[item].id} key={index}>{nation[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='贯籍地' {...formItemLayout}
                                          validateStatus={nativePlaceError ? 'error' : ''}
                                          help={nativePlaceError || ''}
                                >
                                    {
                                        getFieldDecorator('nativePlace', {
                                            initialValue: data.nativePlace || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='出生地' {...formItemLayout}
                                          validateStatus={birthPlaceError ? 'error' : ''}
                                          help={birthPlaceError || ''}
                                >
                                    {
                                        getFieldDecorator('birthPlace', {
                                            initialValue: data.birthPlace || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='婚姻状态' {...formItemLayout}
                                          validateStatus={marriageStateError ? 'error' : ''}
                                          help={marriageStateError || ''}
                                >

                                    {
                                        getFieldDecorator('marriageState', marriageState[data.marriageState] ? {
                                                initialValue: data.marriageState || 0,
                                                rules
                                            } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(marriageState).map((item, index) => {
                                                        return (
                                                            <Option value={marriageState[item].id} key={index}>{marriageState[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='身份证' {...formItemLayout}
                                          validateStatus={idCardError ? 'error' : ''}
                                          help={idCardError || ''}
                                >
                                    {
                                        getFieldDecorator('idCard', {
                                            initialValue: data.idCard || '',
                                            rules: [...rules, {pattern: RegExp(REG.idCard, 'g'), message: '身份证号码输入有误！'}]
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='联系方式' {...formItemLayout}
                                          validateStatus={phoneError ? 'error' : ''}
                                          help={phoneError || ''}
                                >
                                    {
                                        getFieldDecorator('phone', {
                                            initialValue: data.phone || '',
                                            rules: [...rules, {pattern: RegExp(REG.phone, 'g'), message: '手机号输入有误！'}]
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='入党时间' {...formItemLayout}
                                          validateStatus={gmtJoinedError ? 'error' : ''}
                                          help={gmtJoinedError || ''}
                                >
                                    {
                                        getFieldDecorator('gmtJoined', {
                                            initialValue: data.gmtJoined || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='转正情况' {...formItemLayout}
                                          validateStatus={passStateError ? 'error' : ''}
                                          help={passStateError || ''}
                                >
                                    {
                                        getFieldDecorator('passState', passState[data.passState] ? {
                                            initialValue: data.passState || 0,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(passState).map((item, index) => {
                                                        return (
                                                            <Option value={passState[item].id} key={index}>{passState[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='入党介绍人' {...formItemLayout}
                                          validateStatus={introducerError ? 'error' : ''}
                                          help={introducerError || ''}
                                >
                                    {
                                        getFieldDecorator('introducer', {
                                            initialValue: data.introducer,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='转正时间' {...formItemLayout}
                                          validateStatus={gmtPassedError ? 'error' : ''}
                                          help={gmtPassedError || ''}
                                >
                                    {
                                        getFieldDecorator('gmtPassed', {
                                            initialValue: data.gmtPassed,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='月缴纳党费' {...formItemLayout}
                                          validateStatus={duesError ? 'error' : ''}
                                          help={duesError || ''}
                                >
                                    {
                                        getFieldDecorator('dues', {
                                            initialValue: data.dues,
                                            rules: [...rules, {pattern: RegExp(REG.num, 'g'), message: '党费输入有误！'}]
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='家庭住址' {...formItemLayout}
                                          validateStatus={addressError ? 'error' : ''}
                                          help={addressError || ''}
                                >
                                    {
                                        getFieldDecorator('address', {
                                            initialValue: data.address,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='户口所在' {...formItemLayout}
                                          validateStatus={accountAddressError ? 'error' : ''}
                                          help={accountAddressError || ''}
                                >
                                    {
                                        getFieldDecorator('accountAddress', {
                                            initialValue: data.accountAddress,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='个人身份' {...formItemLayout}
                                          validateStatus={identityError ? 'error' : ''}
                                          help={identityError || ''}
                                >
                                    {
                                        getFieldDecorator('identity', {
                                            initialValue: data.identity,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='毕业院校' {...formItemLayout}
                                          validateStatus={schoolError ? 'error' : ''}
                                          help={schoolError || ''}
                                >
                                    {
                                        getFieldDecorator('school', {
                                            initialValue: data.school,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='学位' {...formItemLayout}
                                          validateStatus={degreeError ? 'error' : ''}
                                          help={degreeError || ''}
                                >
                                    {
                                        getFieldDecorator('degree',{ initialValue: data.degree || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem label='专业' {...formItemLayout}
                                          validateStatus={majorError ? 'error' : ''}
                                          help={majorError || ''}
                                >
                                    {
                                        getFieldDecorator('major', {
                                            initialValue: data.major,
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='学历' {...formItemLayout}
                                          validateStatus={qualificationError ? 'error' : ''}
                                          help={qualificationError || ''}
                                >
                                    {
                                        getFieldDecorator('qualification', qualification[data.qualification] ? {
                                            initialValue: data.qualification || 0,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(qualification).map((item, index) => {
                                                        return (
                                                            <Option value={qualification[item].id} key={index}>{qualification[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem label='工作单位' {...formItemLayout}
                                          validateStatus={companyError ? 'error' : ''}
                                          help={companyError || ''}
                                >
                                    {
                                        getFieldDecorator('company', {
                                            initialValue: data.company || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='单位地址' {...formItemLayout}>
                                    {
                                        getFieldDecorator('companyAddress',{ initialValue: data.companyAddress || '' })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='职务名称' {...formItemLayout}>
                                    {
                                        getFieldDecorator('job', { initialValue: data.job || '' })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='技术职务' {...formItemLayout}>
                                    {
                                        getFieldDecorator('technique',{ initialValue: data.technique || '' })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem label='退休时间' {...formItemLayout}>
                                    {
                                        getFieldDecorator('gmtRetired', { initialValue: data.gmtRetired || '' })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>

                            <Col span={12}>
                                <FormItem label='离岗时间' {...formItemLayout}>
                                    {
                                        getFieldDecorator('gmtLeaved',{ initialValue: data.gmtLeaved || '' })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </RCModal>
        )
    }
}

ParterMsgModal = Form.create({})(ParterMsgModal);
export default ParterMsgModal;